<template>
	<!-- 加载中 -->
	<uni-load-more :status="loadingStatus" v-if="isLoading" /> <!-- 加载状态组件 -->
	<view v-else class="category-page">
		<!-- 一级分类导航栏 -->
		<view class="category-primary-container">
			<view class="category-primary-item" :class="{'active': activePrimaryIdx === idx }"
				v-for="(primaryCategory, idx) in primaryCategories" :key="idx" @click="handlePrimaryClick(idx)">
				{{ primaryCategory.name }}
			</view>
		</view>

		<!-- 中间内容区域 -->
		<view class="category-content">
			<swiper class="category-swiper" @change="handleSwiperChange" :current="activePrimaryIdx">
				<swiper-item class="category-swiper__item" v-for="(item, idx) in primaryCategories" :key="idx">
					<!-- 左侧：二级分类列表 -->
					<scroll-view class="category-secondary-container" scroll-y>
						<view class="category-secondary-item" :class="{'active': activeSecondaryIdx === idx }"
							v-for="(secondaryCategory, idx) in secondaryCategories" :key="secondaryCategory.id"
							@click="handleSecondaryClick(idx)">
							<text>{{ secondaryCategory.name }}</text>
						</view>
					</scroll-view>
					<!-- 右侧：三级分类列表 -->
					<scroll-view class="category-tertiary-container" scroll-y :scroll-into-view="activeSectionId"
						show-scrollbar="false" :scroll-top="scrollPosition" @scroll="handleScroll">
						<view class="category-tertiary-group" v-for="(secondaryCategory, idx) in secondaryCategories"
							:key="secondaryCategory.id">
							<view class="category-tertiary-group__title" :id="'section-' + idx">
								<view>{{ secondaryCategory.name }}</view>
							</view>

							<view class="category-tertiary-group__content">
								<view class="category-tertiary-item" @click="handleTertiaryClick(tertiaryCategory)"
									v-for="(tertiaryCategory, subIdx) in secondaryCategory.children" :key="subIdx">
									{{ tertiaryCategory.name }}
								</view>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { listOneTwoCategoryAPI, listTwoThreeCategoryAPI } from '@/services/category'; // 导入分类API
	import { CategoryItem } from '../../types/category'; // 导入分类类型
	import { onShow } from '@dcloudio/uni-app'; // 导入生命周期钩子
	import { ref } from 'vue'; // 导入Vue响应式工具

	/**
	 * 当前激活的一级分类索引
	 */
	const activePrimaryIdx = ref(0);

	/**
	 * 当前激活的二级分类索引
	 */
	const activeSecondaryIdx = ref(0);

	/**
	 * 一级分类数据
	 */
	const primaryCategories = ref<CategoryItem[]>([]);

	/**
	 * 二级分类和三级分类数据
	 */
	const secondaryCategories = ref<CategoryItem[]>([]);

	/**
	 * 加载状态
	 */
	const isLoading = ref(false);

	/**
	 * 滚动位置
	 */
	const scrollPosition = ref(0);

	/**
	 * 加载状态文本
	 */
	const loadingStatus = ref('more');

	/**
	 * 当前激活的区块ID
	 */
	const activeSectionId = ref('');

	/**
	 * 页面显示时调用的生命周期钩子
	 * 初始化加载分类数据
	 */
	onShow(async () => {
		// 开启加载状态
		isLoading.value = true;
		loadingStatus.value = 'loading';
		// 获取一级分类列表数据
		await fetchPrimaryCategories();
		// 获取二级和三级分类数据
		await fetchSecondaryAndTertiaryCategories();
		// 关闭数据加载状态
		setTimeout(() => {
			isLoading.value = false;
			loadingStatus.value = 'more';
		}, 100);
	});

	/**
	 * 获取一级分类列表数据
	 */
	const fetchPrimaryCategories = async () => {
		const res = await listOneTwoCategoryAPI();
		primaryCategories.value = res.data;
	};

	/**
	 * 获取二级分类和三级分类数据
	 */
	const fetchSecondaryAndTertiaryCategories = async () => {
		// 获取当前激活的一级分类id
		const categoryId = primaryCategories.value[activePrimaryIdx.value].id;

		// 重置二级分类索引
		activeSecondaryIdx.value = 0;
		// 获取所有二级分类以及三级分类数据
		const res = await listTwoThreeCategoryAPI(categoryId);
		secondaryCategories.value = res.data;
	};

	/**
	 * 滑动swiper触发的事件处理函数
	 * @param e 滑动事件对象
	 */
	const handleSwiperChange = (e : any) => {
		// 设置当前激活的一级分类索引
		activePrimaryIdx.value = e.detail.current;
		// 查询二级分类和三级分类数据
		fetchSecondaryAndTertiaryCategories();
	};

	/**
	 * 点击一级分类事件处理函数
	 * @param idx 一级分类索引
	 */
	const handlePrimaryClick = (idx : number) => {
		// 设置当前激活的一级分类索引
		activePrimaryIdx.value = idx;
		// 查询二级分类和三级分类数据
		fetchSecondaryAndTertiaryCategories();
		// 滚动到顶部
		scrollToSection(0);
	};

	/**
	 * 滚动到指定二级分类区域
	 * @param idx 二级分类索引
	 */
	const scrollToSection = (idx : number) => {
		activeSectionId.value = 'section-' + idx;
		// 设置二级分类索引
		activeSecondaryIdx.value = idx;
	};

	/**
	 * 点击二级分类事件处理函数
	 * @param idx 二级分类索引
	 */
	const handleSecondaryClick = (idx : number) => {
		activeSectionId.value = 'section-' + idx;
		// 设置二级分类索引
		activeSecondaryIdx.value = idx;
	};

	/**
	 * 点击三级分类事件处理函数
	 * @param tertiaryCategory 三级分类数据
	 */
	const handleTertiaryClick = (tertiaryCategory : CategoryItem) => {
		uni.navigateTo({
			url: '/pages/category/categorySearch?parentId=' + tertiaryCategory.parentId + '&threeCategoryId=' + tertiaryCategory.id
		});
	};

	/**
	 * 滚动右侧区域，左侧联动事件处理函数
	 * @param e 滚动事件对象
	 */
	const handleScroll = (e : any) => {
		// 获取当前滚动距离
		const scrollTop = e.detail.scrollTop;

		// 所有的二级分类的高度数组
		const sectionHeights = ref<number[]>([0]);
		// 最新高度
		let latestHeight = 0;

		// 遍历二级分类数据
		for (let i = 0; i < secondaryCategories.value.length; i++) {
			const secondaryCategory = secondaryCategories.value[i];
			// 计算当前二级分类下三级元素的数量
			const tertiaryCount = secondaryCategory.children?.length || 0;
			// 计算三级元素的行数，每行3个元素
			const rowCount = Math.ceil(tertiaryCount / 3);
			// 计算当前二级分类区域的总高度：二级标题高度50 + 三级元素总高度（每行高度50）
			const sectionHeight = 50 + rowCount * 50;
			// 获取最新高度
			latestHeight += sectionHeight;
			// 添加到高度数组
			sectionHeights.value.push(latestHeight);
		}

		// 移除最后一个元素
		sectionHeights.value.pop();

		// 特殊判断：滚动到顶部
		if (scrollTop <= 50) {
			activeSecondaryIdx.value = 0;
			return;
		}

		// 遍历所有二级分类区域高度
		for (let i = 0; i < sectionHeights.value.length; i++) {
			if (scrollTop >= sectionHeights.value[i]) {
				activeSecondaryIdx.value = i + 1;
				break;
			}
		}
	};
</script>

<style lang="scss">
	// 主容器样式
	.category-page {
		display: flex;
		position: relative;
		flex-direction: column;
		margin-bottom: 1.5rem;
		height: 100%;

		// 一级分类导航栏样式
		.category-primary-container {
			display: flex;
			padding-left: 2rem;
			justify-content: flex-start;
			align-items: center;
			height: 40px;
			overflow-x: auto;
			flex-wrap: nowrap;
			scroll-behavior: smooth;
			position: fixed;
			background-color: white;
			width: 100%;
			box-sizing: border-box;

			// 一级分类项样式
			.category-primary-item {
				padding-left: 20rpx;
				padding-right: 20rpx;
				font-weight: 500;
				position: relative;
				white-space: nowrap;

				// 激活状态
				&.active {
					font-weight: 700;
					font-size: 1.25rem;
					color: #d97706;
				}
			}
		}

		// 中间内容区域样式
		.category-content {
			flex: 1;
			position: relative;
			margin-top: 40px;

			// 分类swiper样式
			.category-swiper {
				height: calc(100vh - 45px);

				// swiper项样式
				.category-swiper__item {
					display: flex;
					overflow: hidden;
					flex-direction: row;

					// 左侧：二级分类列表样式
					.category-secondary-container {
						overflow: hidden;
						width: 180rpx;
						flex: none;
						height: 100%;

						// 二级分类项样式
						.category-secondary-item {
							display: flex;
							justify-content: center;
							align-items: center;
							height: 96rpx;
							font-size: 26rpx;
							position: relative;

							// 激活状态
							&.active {
								font-weight: 700;
								color: #d97706;
							}
						}
					}

					// 右侧：三级分类列表样式
					.category-tertiary-container {
						flex: 1;
						margin: 10px;

						// 隐藏滚动条
						&::-webkit-scrollbar {
							display: none;
							width: 0;
							height: 0;
							color: transparent;
							background: transparent;
						}

						// 三级分类组样式
						.category-tertiary-group {
							display: flex;
							flex-direction: column;

							// 组标题样式
							.category-tertiary-group__title {
								height: 50px;
								display: flex;
								align-items: center;
								justify-content: space-around;
								font-size: 15px;
								background-color: antiquewhite;
								border-radius: 10px;
							}

							// 组内容样式
							.category-tertiary-group__content {
								flex: 1;
								display: grid;
								grid-template-columns: repeat(3, 1fr);
								gap: 10px;
								padding: 10px;
								box-sizing: border-box;

								// 三级分类项样式
								.category-tertiary-item {
									min-width: 100rpx;
									border-radius: 16rpx;
									padding: 20rpx;
									display: flex;
									align-items: center;
									justify-content: center;
									font-size: 24rpx;
									line-height: 1.5;
									box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
									white-space: nowrap;
								}
							}
						}
					}
				}
			}
		}
	}
</style>